<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>01-axios基本使用</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
</head>
<!-- 
    1.axios调用的返回值是Promise实例
    2.成功的值叫response，失败的叫error
    3.axios 成功的值是一个axios封装的response对象，服务器返回的真实数据在response.data中
    4.携带query参数的配置项叫做params
    5.携带parmas 需要自己拼接

    常用语法：
    1. axios(config): `通用/最本质`的发任意类型请求的方式 
    2. axios(url[, config]): 可以只指定 url 发 get 请求 
    3. axios.request(config): 等同于 axios(config) 
    4. axios.get(url[, config]): 发 get 请求 
    5. axios.delete(url[, config]): 发 delete 请求 
    6. axios.post(url[, data, config]): 发 post 请求
    7. axios.put(url[, data, config]): 发 put 请求 
   -->

<body>
  <button id="getEveryoneBtn">点击获取所有人的信息</button>
  <br><br>
  <button id="getPersonByIdBtn">点击根据id获取指定的个人信息</button>
  <input type="text" id="personId" placeholder="请输入id">
  <br><br>
  <button id="addPersonBtn">点击添加一个人</button>
  <input type="text" id="personName" placeholder="请输入姓名">
  <input type="text" id="personAge" placeholder="请输入年龄">
  <br><br>
  <button id="updatePersonBtn">点击修改一个人</button>
  <input type="text" id="updatePersonId" placeholder="请输入id">
  <input type="text" id="updatePersonName" placeholder="请输入姓名">
  <input type="text" id="updatePersonAge" placeholder="请输入年龄">
  <br><br>
  <button id="deletePersonBtn">点击删除一个人</button>
  <input type="text" id="deletePersonId" placeholder="请输入id">


  <script>
    //获取dom节点
    const getEveryoneBtn = document.getElementById('getEveryoneBtn');
    const getPersonByIdBtn = document.getElementById('getPersonByIdBtn');
    const addPersonBtn = document.getElementById('addPersonBtn');
    const updatePersonBtn = document.getElementById('updatePersonBtn');
    const deletePersonBtn = document.getElementById('deletePersonBtn');
    const personId = document.getElementById('personId');
    const personName = document.getElementById('personName');
    const personAge = document.getElementById('personAge');
    const updatePersonId = document.getElementById('updatePersonId');
    const updatePersonName = document.getElementById('updatePersonName');
    const updatePersonAge = document.getElementById('updatePersonAge');
    const deletePersonId = document.getElementById('deletePersonId');



    //获取所有人信息-发送GET请求-不携带参数
    getEveryoneBtn.onclick = () => {
      // 完整版
      /* axios({
        url: 'http://localhost:5000/test1?delay=5000',  //请求地址
        method: 'GET',  //请求方式
        timeout: 2000,   //设置超时时间为2s
      }).then(
        response => {
          console.log(response);          //response是axios封装的一个成功的值的对象
          console.log(response.config);   //保存的请求数据包括：请求地址、请求头、请求方式等等
          console.log(response.data);     //服务器返回的真实数据
          console.log(response.headers);  //响应头
          console.log(response.request);  //XMLHttpRequest实例
          console.log(response.status);  //响应状态码
        },
        error => { console.log(error); }    
      ); */
      // 简写版
      axios.get('http://localhost:5000/persons')
        .then(
          response => { console.log(response.data); },
          error => { console.log(error); }
        );
    };

    // 获取某个人的信息 - 发送GET请求 - 携带query参数
    getPersonByIdBtn.onclick = () => {
      // 完整版
      /* axios({
        url: 'http://localhost:5000/person',  //请求地址,携带parmas参数需要自己拼接在url地址中
        method: 'GET',
        params: { id: personId.value },       //此处写的是params，但是携带的是query参数
      }).then(
        (response) => { console.log(response.data); },
        (error) => { console.log('失败原因：', error); }
      ); */
      // 简写版
      // axios.get('http://localhost:5000/person',{params: { id: personId.value }})  //简写版query参数只能这么写，还不如直接写在地址里面
      axios.get(`http://localhost:5000/person?id=${personId.value}`)  //query参数直接写在地址里面
        .then(
          response => { console.log(response.data) },
          error => { console.log('失败原因：', error); }
        )
    }

    // 添加一个人，年龄和名字--发送POST请求--携带json编码参数或urlencoded编码
    addPersonBtn.onclick = () => {
      // 完整版
      /* axios({
        url: 'http://localhost:5000/person',
        method: 'POST',
        // data: { name: personName.value, age: personAge.value },    //携带请求体参数，json编码 
        data: `name=${personName.value}&age=${personAge.value}`,       //携带请求体参数，urlencoded编码
      }).then(
        response => { console.log(response.data); },
        error => { console.log(error); }
      ); */
      // 简写版
      // axios.post('http://localhost:5000/person', { name: personName.value, age: personAge.value })  //携带请求体参数，json编码 
      axios.post('http://localhost:5000/person', `name=${personName.value}&age=${personAge.value}`)  //携带请求体参数，urlencoded编码 
        .then(
          response => { console.log(response.data); },
          error => { console.log(error); }
        )
    }

    // 更新某个人--发送PUT请求--携带json编码参数或urlencoded编码
    updatePersonBtn.onclick = () => {
      // 完整版
      /* axios({
        url: 'http://localhost:5000/person',
        method: 'PUT',
        data: {
          id: updatePersonId.value,
          name: updatePersonName.value,
          age: Number.parseInt(updatePersonAge.value)   //将字符串转成number
        }
      }).then(
        response => { console.log(response.data); },
        error => { console.log(error); }
      ); */
      // 简写版 
      axios.put(
        'http://localhost:5000/person',
        {
          id: updatePersonId.value,
          name: updatePersonName.value,
          age: Number.parseInt(updatePersonAge.value)   //将字符串转成number
        })
        .then(
          response => { console.log(response.data); },
          error => { console.log(error); }
        )
    }

    // 删除某个人--发送DELETE请求--携带parmas
    deletePersonBtn.onclick = () => {
      // 完整版
      /* axios({
        url: `http://localhost:5000/person/${deletePersonId.value}`,  //携带parmas只能拼接在url中
        method: 'DELETE',
      }).then(
        response => { console.log(response.data); },
        error => { console.log(error); }
      ); */
      // 简写版
      axios.delete(`http://localhost:5000/person/${deletePersonId.value}`)
        .then(
          response => { console.log(response.data); },
          error => { console.log(error); }
        )
    }

  </script>
</body>

</html>